<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="shortcut icon" href="/images/s.ico" type="image/x-icon">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/common.css">
	<link rel="stylesheet" href="/css/shopcart.css">
	<title>购物车</title>
</head>
<body>
<!-- 顶部栏 -->
<div class="header">
	<!-- 顶部栏版心 -->
	<div class="inner_c header_c">
		<!-- 所有类别弹出栏 -->
		<div id="all-type" class="all-type">
			<!-- 所有类别 -->
			<div class="fix-width">
				<ul class="type-left">
					<li>
						<a href="#">不锈钢</a>
					</li>
					<li>
						<a href="#">原料水泥</a>
					</li>
					<li>
						<a href="#">塑料</a>
					</li>
					<li>
						<a href="#">木制</a>
					</li>
					<li>
						<a href="#">陶瓷</a>
					</li>
				</ul>
				<div class="type-right">
					<ul>
						<li>
							<a href="#" class="goods-link" target="_blank" title="简约原木餐盘">
								<img src="/images/img25.png" alt="简约原木餐盘">
							</a>
							<a href="#" class="goods-title" title="简约原木餐盘" target="_blank">简约原木餐盘</a>
							<div class="price">
								<span>￥300.00</span>
							</div>
							<a href="#" class="mask">
								<span>查看详情</span>
							</a>
						</li>
						<li>
							<a href="#" class="goods-link" target="_blank" title="不锈钢时尚咖啡水壶">
								<img src="/images/img26.png" alt="不锈钢时尚咖啡水壶">
							</a>
							<a href="#" class="goods-title" title="不锈钢时尚咖啡水壶" target="_blank">不锈钢时尚咖啡水壶</a>
							<div class="price">
								<span>￥400.00</span>
							</div>
							<a href="#" class="mask">
								<span>查看详情</span>
							</a>
						</li>
						<li>
							<a href="#" class="goods-link" target="_blank" title="经典系列红色时钟">
								<img src="/images/img103.png" alt="经典系列红色时钟">
							</a>
							<a href="#" class="goods-title" title="经典系列红色时钟" target="_blank">经典系列红色时钟</a>
							<div class="price">
								<span>￥580.00</span>
							</div>
							<a href="#" class="mask">
								<span>查看详情</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 左边导航栏 -->
		<div class="topnav-left">
			<div class="logo">
				<a href="index.html">
					<img src="/images/logo.png" alt="logo">
				</a>
			</div>
			<ul>
				<li id="show-all-type">
					<a href="#">查看所有类别</a>
				</li>
				<li>
					<a href="index.html">首页</a>
				</li>
				<li>
					<a href="allproducts.html">所有产品</a>
				</li>
				<li>
					<a href="blog.html">博客</a>
				</li>
				<li>
					<a href="article.html">文章列表</a>
				</li>
			</ul>
		</div>
		<!-- 右边导航栏 -->
		<div class="topnav-right">
			<!-- 搜索栏 -->
			<a href="#" class="search"></a>
			<a href="login.html" class="topnav-right-font">登录</a>
			<span class="topnav-right-font">|</span>
			<a href="register.html" class="topnav-right-font">注册</a>
			<!-- 购物车和购物车详情 -->
			<div class="shop-cart-and-cart-detail">
				<!-- 购物车 -->
				<div class="shop-cart">
					<span class="cart-icon"></span>
					<span class="cart-number">0</span>
				</div>
				<!-- 购物车详情-->
				<div class="cart-detail">
					<p class="con">0件商品 共计：<span>￥0</span></p>
					<a href="shopcart.html" class="btn">结算</a>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 顶部栏结束 -->

<div class="outer9">
	<div class="inter1">
		<div class="h1">购物车</div>
	</div>
	<div class="inter2">
		<div class="inter21">
			<input type="checkbox" class="checkAll"><span class="s1">全选</span>
			<span class="s2">商品名称</span><span class="s3">单价</span>
			<span class="count">数量</span><span class="total">小计</span><span class="del">操作</span>
		</div>
		<div class="inter22">
			<ul>
				<li>
					<input type="checkbox" class="check"><img src="/images/img103.png" alt="">
					<span class="s1">经典系列红色时钟</span><span class="money">¥</span>
					<span class="price">580</span><input type="button" value="-" class="sub">
					<span class="count">1</span><input type="button" value="+" class="add">
					<span class="money1">¥</span><span class="total">580</span>
					<span class="del">删除</span>
				</li>
				<li>
					<input type="checkbox" class="check"><img src="/images/img02.png" alt="">
					<span class="s1">便携简约清扫扫帚</span><span class="money">¥</span>
					<span class="price">580</span><input type="button" value="-" class="sub">
					<span class="count">1</span><input type="button" value="+" class="add">
					<span class="money1">¥</span><span class="total">580</span>
					<span class="del">删除</span>
				</li>
				<li>
					<input type="checkbox" class="check"><img src="/images/s3.png" alt="">
					<span class="s1">黑色陶瓷研磨器皿</span> <span class="money">¥</span>
					<span class="price">150</span><input type="button" value="-" class="sub">
					<span class="count">1</span><input type="button" value="+" class="add">
					<span class="money1">¥</span><span class="total">150</span>
					<span class="del">删除</span>
				</li>
			</ul>
		</div>
		<div class="inter23">
			<div class="picture">
				<img src="/images/nullcart.png" alt="">
			</div>
			<p>您的购物车还没有商品，快去挑选心爱的商品吧！</p>
			<a href="allproducts.html"><span>去逛逛</span></a>
		</div>
	</div>
	<div class="inter3">
		<div class="inter31">
			<div class="last">
				<a href="javascript:void(0)">确认结算</a>
			</div>
			<input type="checkbox" class="checkAll"><span class="s1">全选</span>
			<span class="ss1">删除</span><span class="ss2">清除下架商品</span>
			<div class="foot">
				已选<span class="totalCount">0</span>件
				合计(不含运费) : <span class="totalPrice">¥0</span>元<br>
				<span class="ss3">已优惠 : <span class="ss4"> ¥0</span></span>
			</div>
		</div>
	</div>
</div>

<!-- footer部分开始 -->
<div class="footer">
	<div class="footer_c inner_c">
		<div class="footer_top">
			<div class="bir">
				<a href="#">
					<img src="/images/logo.png" alt="">
				</a>
				<div class="info">
					青竹良品原创生活类电商品牌，秉承一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到最优质的商品，全线采用天然原材料，控制甲醛低量无害，采用进口工艺，国际生产线不断优化，食材保证核心原产地新鲜直供，让你享受品质生活
				</div>
			</div>
			<div class="about">
				<dl>
					<dt>
						<a href="#">关于我们</a>
					</dt>
					<dd>
						<a href="#">我的品牌</a>
					</dd>
					<dd>
						<a href="#">公司动态</a>
					</dd>
					<dd>
						<a href="#">经历发展</a>
					</dd>
					<dd>
						<a href="#">商品推广</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">支付方式</a>
					</dt>
					<dd>
						<a href="#">微信支付</a>
					</dd>
					<dd>
						<a href="#">支付宝</a>
					</dd>
					<dd>
						<a href="#">百度钱包</a>
					</dd>
					<dd>
						<a href="#">货到付款</a>
					</dd>
				</dl>
				<dl>
					<dt>
						<a href="#">相关服务</a>
					</dt>
					<dd>
						<a href="#">退货政策</a>
					</dd>
					<dd>
						<a href="#">购物流程</a>
					</dd>
					<dd>
						<a href="#">客服服务</a>
					</dd>
					<dd>
						<a href="#">商务合作</a>
					</dd>
				</dl>
			</div>
			<div class="ewm">
				<p class="wx">
					<img src="/images/img71.png" alt="">
					<span>微信公众号</span>
				</p>
				<p class="wb">
					<img src="/images/img72.png" alt="">
					<span>微博公众号</span>
				</p>
			</div>
		</div>
	</div>
	<div class="footer_bar">
		<div class="footer_bar_c inner_c">
			<div class="pay">
				<p class="copy">
					2019 © youhaosuda.com
				</p>
				<p class="ico">
					<a href="#">
						<img src="/images/img81.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img82.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img83.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img84.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img85.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img86.png" alt="">
					</a>
					<a href="#">
						<img src="/images/img87.png" alt="">
					</a>
				</p>
			</div>
			<div class="super">
				<a href="#" class="pic1">

				</a>
				<a href="#" class="pic2">

				</a>
				<a href="#" class="pic3">

				</a>
			</div>
		</div>
	</div>
</div>

<!-- 返回顶部 -->
<div class="lingpin_top">
	<a href="#" class="qq">QQ<br/>客服</a>
	<a href="#" class="wx">微信<br/>客服</a>
	<a href="#" class="top_c">↑</a>
</div>

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/shopcart.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#show-all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        });
        $("#all-type").hover(function () {
            $("#all-type").show()
        }, function () {
            $("#all-type").hide()
        })
    })
</script>
</body>
</html>